<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.css">
    <link rel="stylesheet" href="../../../resource/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css">
    <script src="../../../js/jquery-3.4.1.js"></script>
    <style>

        .room-center {
            width: 500px;
            border: 1px solid black;
        }

        .my-center {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 300px;
            align-items: center;
            border: 1px solid black;
            border-radius: 3px;
            margin: 5px;
        }

        .my-center > * {
            margin: 5px;
        }

        .my-center textarea {
            width: 200px;
            height: 100px;
        }

        .my-center button {
            width: 100px;
        }

    </style>
</head>
<body style="text-align: center;">
<div class="room-center">
    <div class="my-center">
        <div id="myForm"></div>
    </div>
</div>
<button onclick="showParentAlert()">显示父页面弹窗</button>
<button onclick="openNewWin1()">本页面开一个弹窗</button>
<button onclick="openParentNewWin()">通过父页面开一个弹窗</button>
<script>

    var myForm = new dhtmlXForm("myForm", [
        {type: "input",   name: "name",  value: "Ogiwara Masaaki", label: "用户名"},
        {type: "input", name: "address",  value: "",  label: "地址", offsetLeft: 12},
        {type: "password", name: "pwd",  value: "12345",  label: "密码", offsetLeft: 12},
        {type: "button",   name: "login", value: "登陆", offsetLeft: 72}
    ]);
    var myPop = new dhtmlXPopup({
        form: myForm,
        id: ["name","pwd"] // attaches the same popup to "Full Name" and "Password" inputs
    });

    myForm.attachEvent("onFocus", function(id,value){
        console.log(id, value);
        if (typeof(value) != "undefined") {
            id = [id, value]
        }
        if (id === "name") {
            myPop.attachHTML("请输入用户名, 不能为空");
        }
        if (id === "pwd") {
            myPop.attachHTML("请输入密码, 不能为空");
        }
        myPop.show(id);
    });
    myForm.attachEvent("onBlur", function(id,value){
        myPop.hide();
    });

    var myWins1 = new dhtmlXWindows();

    function showParentAlert() {
        window.parent.showAlert();
    }

    function openNewWin1() {
        let height = 300;
        let width = 300;

        let win = myWins1.createWindow('win11', 100, 100, height, width);
        myWins1.window('win11').setText('测试内容');
        myWins1.window('win11').denyMove();
        myWins1.window('win11').attachURL("../form/formTest.html", null, {id: 1});
    }

    function openParentNewWin() {
        window.parent.openNewWin2();
        window.parent.closeOpenWin();
    }

</script>
</body>
</html>